import { CommonText, SchemaNodeKey } from "@/utils/constants";
import { ElTooltip } from "element-plus";
import MiniToggle from "../components/MiniToggle";
import "../model.scss";
/**
 * 详情分类导航，根据Scheme描述分类信息
 */
//根据Schema绘制分类导航
export default defineComponent({
	emits: ["change"],
	setup(props, { emit }) {
		const schema = inject<any>(SchemaNodeKey.gatewaySchema);
		// const profile = inject<any>(SchemaNodeKey.profile);
		const active = ref("");
		const change = (type: string) => {
			active.value = type;
			emit("change", active.value);
		};
		onMounted(() => {
			change(SchemaNodeKey.basic);
		});
		return () => {
			return (
				<>
					<div class="block-nav flex pl-6 pr-6 h-12 text-base">
						<NavItem
							navKey={SchemaNodeKey.basic}
							onChange={val => change(val)}
							active={active.value == SchemaNodeKey.basic}
							schema={schema.value.properties && schema.value.properties.props.properties}
						/>
						<div
							onClick={() => change(SchemaNodeKey.sensor)}
							class={`pl-6 pr-6 item ${active.value == SchemaNodeKey.sensor ? "active" : ""}`}
						>
							变量模型
						</div>
						<div
							onClick={() => change(SchemaNodeKey.extNavGatewayConfig)}
							class={`pl-6 pr-6 item ${active.value == SchemaNodeKey.extNavGatewayConfig ? "active" : ""}`}
						>
							网关配置
						</div>
						<div
							onClick={() => change(SchemaNodeKey.extLower)}
							class={`pl-6 pr-6 item ${active.value == SchemaNodeKey.extLower ? "active" : ""}`}
						>
							下位机配置
						</div>
						{/* <div
							onClick={() => change(SchemaNodeKey.extNavDeviceConfig)}
							class={`pl-6 pr-6 item ${active.value == SchemaNodeKey.extNavDeviceConfig ? "active" : ""}`}
						>
							下位机配置
						</div>
						<div
							onClick={() => change(SchemaNodeKey.extNavSensorConfig)}
							class={`pl-6 pr-6 item ${active.value == SchemaNodeKey.extNavSensorConfig ? "active" : ""}`}
						>
							下位机变量
						</div> */}
						{/* <div
							onClick={() => change(SchemaNodeKey.extRunningLog)}
							class={`pl-6 pr-6 item ${active.value == SchemaNodeKey.extRunningLog ? "active" : ""}`}
						>
							运行日志
						</div> */}
						<div
							onClick={() => change(SchemaNodeKey.extDevelop)}
							class={`pl-6 pr-6 item ${active.value == SchemaNodeKey.extDevelop ? "active" : ""}`}
						>
							{CommonText.debugPreviewSchemaGateway}
						</div>
						<MiniToggle />
					</div>
				</>
			);
		};
	}
});

const NavItem = defineComponent({
	props: {
		active: {
			type: Boolean,
			default: false
		},
		navKey: {
			type: String,
			default: ""
		},
		schema: {
			type: Object,
			default: () => {}
		}
	},
	emits: ["change"],
	setup(props, { emit }) {
		// const schema = inject<any>(SchemaNodeKey.gatewaySchema);
		// const profile = inject<any>(SchemaNodeKey.profile);
		return () => {
			return (
				<div
					class={`pl-6 pr-6 item ${props.active ? "active" : ""}`}
					onClick={() => {
						emit("change", props.navKey);
					}}
				>
					{props.schema && props.schema[props.navKey].title}
					{props.schema && props.schema[props.navKey].description ? (
						<ElTooltip
							raw-content
							v-slots={{
								content: () => {
									return <div class="text-sm" v-html={props.schema[props.navKey].description}></div>;
								}
							}}
						>
							<i class="iconfont iconhelp-circle pl-2 "></i>
						</ElTooltip>
					) : (
						""
					)}
				</div>
			);
		};
	}
});
